$(function () {
    time();
    getHt();
    initMap();
    mapActive();
    char1();
    char2();
    char3();
    mapRestList();
    rightChange();
})

function time() {
    var vWeek, vWeek_s, vDay;
    vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var date = new Date();
    vWeek_s = date.getDay();
    // 获取当前日期和时间的各个部分
    var year = date.getFullYear().toString(); // 年份
    var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份
    var day = date.getDate().toString().padStart(2, '0'); // 日
    var hours = date.getHours().toString().padStart(2, '0'); // 小时
    var minutes = date.getMinutes().toString().padStart(2, '0'); // 分钟
    var seconds = date.getSeconds().toString().padStart(2, '0'); // 秒钟

    // 将日期和时间显示在页面上
    document.getElementById("time").innerHTML = "当前时间  " + year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];

};
setInterval("time()", 1000);

var url = 'http://8.138.133.80:5000'
// var url = 'http://127.0.0.1:5000'


//加载地图
function initMap() {
    $.get(url + '/getMapData').done(function (data1) {
        var cityList = ['广州市', '深圳市', '珠海市', '汕头市', '佛山市', '韶关市', '河源市', '梅州市', '惠州市', '汕尾市', '东莞市', '中山市', '江门市', '阳江市', '湛江市', '茂名市', '肇庆市', '清远市', '潮州市', '揭阳市', '云浮市']
        var geoCoordMap = {
            广州市: [113.507649675, 23.3200491021],
            东莞市: [113.863433991, 22.9430238154],
            中山市: [113.422060021, 22.5451775145],
            云浮市: [111.750945959, 22.9379756855],
            佛山市: [113.034025635, 23.0350948405],
            惠州市: [114.41065808, 23.1135398524],
            揭阳市: [116.079500855, 23.3479994669],
            梅州市: [116.126403098, 24.304570606],
            汕头市: [116.588650288, 23.2839084533],
            汕尾市: [115.572924289, 22.9787305002],
            江门市: [112.678125341, 22.2751167835],
            河源市: [114.913721476, 23.9572508505],
            深圳市: [114.025973657, 22.5960535462],
            清远市: [113.040773349, 23.9984685504],
            湛江市: [110.165067263, 21.2574631038],
            潮州市: [116.830075991, 23.7618116765],
            珠海市: [113.262447026, 22.1369146461],
            肇庆市: [112.37965337, 23.5786632829],
            茂名市: [110.931245331, 21.9682257188],
            阳江市: [111.777009756, 21.9715173045],
            韶关市: [113.594461107, 24.8029603119]
        };

        // 百度地图API功能
        var map = new BMap.Map("map_box");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(113.285, 23.134), 11);    // 初始化地图,设置中心点坐标和地图级别

        //添加地图类型控件
        var size1 = new BMap.Size(10, 50);
        map.addControl(new BMap.MapTypeControl({
            offset: size1,
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP,

            ],
        }));
        map.addControl(new BMap.ScaleControl());
        var traffic = new BMap.TrafficLayer();
        map.addTileLayer(traffic);

        for (let i = 0; i < 21; i++) {
            (function (index) {
                let cityName = cityList[index];
                let point = new BMap.Point(geoCoordMap[cityName][0], geoCoordMap[cityName][1]);
                var marker = new BMap.Marker(point); // 创建标注点
                map.addOverlay(marker); // 将标注点添加到地图上
                var opts = {
                    width: 200,     // 信息窗口宽度
                    height: 120,    // 信息窗口高度
                    title: '<div style="font-size: 16px; color: #333;"><strong>' + cityName + '相关数据</strong></div>' // 信息窗口标题
                };

                let content = '<div style="font-size: 14px; color: #333; padding: 10px;">' +
                    '<p><strong>人口数量:</strong> ' + data1[cityName][0] + '</p>' +
                    '<p><strong>生产总值:</strong> ' + data1[cityName][1] + '</p>' +
                    '<p><strong>AQI达标率:</strong> ' + data1[cityName][2] + '</p>' +
                    '<p><strong>消费水平:</strong> ' + data1[cityName][3] + '</p>' +
                    '</div>';

                // 监听标注点点击事件
                marker.addEventListener("click", function () {
                    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                    map.openInfoWindow(infoWindow, point);
                });
            })(i);
        };


        map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放.

        //加载城市控件
        var size = new BMap.Size(15, 80);
        map.addControl(new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: size,
        }));

    });
}




//获取div的高度
function getHt() {
    var all_height = $(window).height();
    var div_height = all_height - 84;
    $("#car_control").css("height", div_height + "px");
}

//专题图点击
function mapRestList() {
    $(".map_work>ul>li").click(function () {
        $(".map_work>ul").hide();
        $(".map_resList").show();
    })
}

//返回
function back() {
    $(".map_work>ul").show();
    $(".map_resList").hide();
}

//右侧功能界面切换
function rightChange() {
    $(".map_right_top>ul>li").click(function () {
        var ins = $(this).index();
        $(this).addClass("li_active").siblings().removeClass("li_active");
        $(".map_con .map_con_div").eq(ins).show().siblings().hide();
    })
}

//工具条点击效果
function mapActive() {
    $(".map_top>ul>li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(this).find("a").addClass("active");
        $(this).find("a").parents("li").siblings().find("a").removeClass("active");
    })
}

//统计分析图
function char1() {

    $.get(url + '/permanentPopulation').done(function (data1) {

        // 表格数据
        const tableData = data1['data'];
        console.log(data1);
        // 添加数据到表格
        function populateTable() {
            const tbody = $('.table-container table tbody');
            tableData.forEach(data => {
                const row = $('<tr>');
                row.html(`
                <td>${data.year}</td>
                <td>${data.city}</td>
                <td>${data.population}</td>
            `);
                tbody.append(row);
            });
        }

        // 自动滚动表格
        const scrollSpeed = 30; // 滚动速度（毫秒）
        let scrollInterval;

        function startScroll() {
            scrollInterval = setInterval(() => {
                const tableContainer = $('.table-container');
                const maxScrollTop = tableContainer[0].scrollHeight - tableContainer.outerHeight();
                const currentScrollTop = tableContainer.scrollTop();

                // 如果到达底部，重新开始滚动
                if (currentScrollTop >= maxScrollTop - 3) {
                    tableContainer.scrollTop(0);
                } else {
                    // 否则继续向下滚动一个像素
                    tableContainer.scrollTop(currentScrollTop + 1);
                }

            }, scrollSpeed);
        }

        // 当鼠标悬停时停止自动滚动
        $('.table-container').mouseenter(function () {
            clearInterval(scrollInterval);
        });

        // 当鼠标离开时重新开始自动滚动
        $('.table-container').mouseleave(function () {
            startScroll();
        });

        // 初始化
        populateTable(); // 添加表格数据
        startScroll(); // 开始自动滚动

    });
}

function char2() {

    $.get(url + '/grossDomesticProduct').done(function (data1) {

        // 表格数据
        const tableData = data1['data'];
        console.log(data1);
        // 添加数据到表格
        function populateTable() {
            const tbody = $('.scrollable-table table tbody');
            tableData.forEach(data => {
                const row = $('<tr>');
                row.html(`
                <td>${data.year}</td>
                <td>${data.city}</td>
                <td>${data.population}</td>
            `);
                tbody.append(row);
            });
        }

        // 自动滚动表格
        const scrollSpeed = 30; // 滚动速度（毫秒）
        let scrollInterval;

        function startScroll() {
            scrollInterval = setInterval(() => {
                const tableContainer = $('.scrollable-table');
                const maxScrollTop = tableContainer[0].scrollHeight - tableContainer.outerHeight();
                const currentScrollTop = tableContainer.scrollTop();

                // 如果到达底部，重新开始滚动
                if (currentScrollTop >= maxScrollTop - 3) {
                    tableContainer.scrollTop(0);
                } else {
                    // 否则继续向下滚动一个像素
                    tableContainer.scrollTop(currentScrollTop + 1);
                }

            }, scrollSpeed);
        }

        // 当鼠标悬停时停止自动滚动
        $('.scrollable-table').mouseenter(function () {
            clearInterval(scrollInterval);
        });

        // 当鼠标离开时重新开始自动滚动
        $('.scrollable-table').mouseleave(function () {
            startScroll();
        });

        // 初始化
        populateTable(); // 添加表格数据
        startScroll(); // 开始自动滚动

    });
}

function char3() {

    $.get(url + '/disposableIncome').done(function (data1) {

        // 表格数据
        const tableData = data1['data'];
        console.log(data1);
        // 添加数据到表格
        function populateTable() {
            const tbody = $('.table-container1 table tbody');
            tableData.forEach(data => {
                const row = $('<tr>');
                row.html(`
                <td>${data.year}</td>
                <td>${data.city}</td>
                <td>${data.population}</td>
            `);
                tbody.append(row);
            });
        }

        // 自动滚动表格
        const scrollSpeed = 30; // 滚动速度（毫秒）
        let scrollInterval;

        function startScroll() {
            scrollInterval = setInterval(() => {
                const tableContainer = $('.table-container1');
                const maxScrollTop = tableContainer[0].scrollHeight - tableContainer.outerHeight();
                const currentScrollTop = tableContainer.scrollTop();

                // 如果到达底部，重新开始滚动
                if (currentScrollTop >= maxScrollTop - 3) {
                    tableContainer.scrollTop(0);
                } else {
                    // 否则继续向下滚动一个像素
                    tableContainer.scrollTop(currentScrollTop + 1);
                }

            }, scrollSpeed);
        }

        // 当鼠标悬停时停止自动滚动
        $('.table-container1').mouseenter(function () {
            clearInterval(scrollInterval);
        });

        // 当鼠标离开时重新开始自动滚动
        $('.table-container1').mouseleave(function () {
            startScroll();
        });

        // 初始化
        populateTable(); // 添加表格数据
        startScroll(); // 开始自动滚动

    });
}
